<template>
	<view>
		<view v-if="viewDate" class="flex-between">
			<view>{{ item.scheduleStandardDate }}</view>
			<view>来自：{{ item.detailTitle }}</view>
		</view>
		<view class="itemTask" @tap="toDetail(item)">
			<view class="task-header">
				<view v-if="item.scheduleCategory === 2">
					需要
					<text class="warn">{{
						getCompleteUrgency(item.completeUrgency)
					}}</text>
				</view>
				<view class="left" v-else>
					<text>{{ item.scheduleStartTime }}</text>
					<text class="pipe"></text>
					<image
						src="https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/131044/ORG/hzsyien1s0liilhqjadk202mk.png?timestamp=1687864569140"
					></image>
					<text class="pipe"></text>
					<text>{{ item.scheduleEndTime }}</text>
				</view>
				<view class="toDetail">查看详情</view>
			</view>
			<view class="task-body">{{ item.scheduleContent }}</view>
			<view class="task-footer">
				<view class="left">
					<view class="item">{{
						getCategoryName(
							item.scheduleCategory,
							item.scheduleType
						)
					}}</view>
					<view
						class="item"
						:class="'active-' + item.schedulePriority"
						>{{ getPriority(item.schedulePriority) }}</view
					>
					<view class="item">{{
						getLabel(item.scheduleLabelId)
					}}</view>
				</view>
				<view class="completeAction" v-if="showComplete(item)">
					<view
						class="btn"
						v-if="myUserId === item.belongUserId && item.id"
						@click.stop="complete(item)"
						>完成</view
					>
				</view>
			</view>
			<view class="icon" v-if="item.scheduleStatus === 3">
				<image
					src="https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130655/ORG/eude424foj0euo36j9ksdmyne.png?timestamp=1688955391449"
				></image>
			</view>
			<view class="icon" v-if="item.scheduleStatus === 4">
				<image
					src="https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130655/ORG/0e01lnk5bc81jtcopeagpnou7.png?timestamp=1688902316145"
				></image>
			</view>
			<view class="icon" v-if="item.scheduleStatus === 5">
				<image
					src="https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130655/ORG/lb8vmmaqkc96cg0wp7ibcn4a6.png?timestamp=1688902508630"
				></image>
			</view>
		</view>
	</view>
</template>
<script>
import {
	levelOptions,
	typeOptions,
	labelOptions,
	getUrgencyOptionItem,
	scheduleStatusOptions,
} from '../schedule/config'
import { finishSchedule } from '@/apis/calendar'
export default {
	// openOperateComplete
	emits: ['openOperateComplete', 'refresh'],
	data() {
		return {
			myUserId: uni.getStorageSync('userId'),
		}
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {}
			},
		},
		viewDate: {
			type: Boolean,
			default: false,
		},
	},
	methods: {
		showComplete(item) {
			return [
				scheduleStatusOptions[0].value,
				scheduleStatusOptions[1].value,
			].includes(item.scheduleStatus)
		},
		complete(data) {
			const { id: scheduleId, scheduleType, scheduleCategory } = data
			const _this = this
			if (scheduleType === 3) {
				this.$emit('openOperateComplete', { data })
			} else {
				//@Todo: 图片必传，先写死
				const remarkPicUrl = [
					'https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/131044/ORG/166ut50stwh9c7wnm76z7r2kv.png?timestamp=1686920085930',
				]
				uni.showModal({
					title: `确认已完成${
						scheduleCategory === 1 ? '日程' : '行动措施'
					}？`,
					success: function (res) {
						if (res.confirm) {
							finishSchedule({ scheduleId, remarkPicUrl }).then(
								(res) => {
									if (res.success) {
										_this.$emit('refresh', {})
									}
								}
							)
						}
					},
				})
			}
		},
		getCategoryName(value, scheduleType) {
			if (scheduleType === 3) {
				return '例行'
			}
			return (
				(typeOptions.filter((t) => t.value === value)[0] || {}).label ||
				'日程'
			)
		},
		getPriority(value) {
			return (levelOptions.filter((t) => t.value === value)[0] || {})
				.label
		},
		getLabel(value) {
			return (labelOptions.filter((t) => t.value === value)[0] || {})
				.label
		},
		getCompleteUrgency(value = 0) {
			const item = getUrgencyOptionItem(value) || {}
			return item.label || value + '完成'
		},
		toDetail(item) {
			if (!item.detailViewFlag) {
				uni.showToast({
					title: '您不是参与人，暂无查看权限',
					icon: 'error',
				})
				return
			}
			if (item.scheduleType === 3) {
				uni.navigateTo({
					url: `/subPackagesLog/pages/workLog/workLogDetail?id=${item.id}&templateId=${item.templateId}&scheduleStandardDate=${item.scheduleStandardDate}`,
				})
			} else {
				uni.navigateTo({
					url: `/subPackagesLog/pages/workLog/schedule/create?scheduleId=${item.id}`,
				})
			}
		},
	},
}
</script>
<style lang="scss" scoped>
.warn {
	color: #d6837c;
}
.itemTask {
	position: relative;
	padding: 10rpx 20rpx;
	display: flex;
	flex-direction: column;
	gap: 10rpx;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	border: 1rpx solid #999;
	.task-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.toDetail {
			color: $primary-color;
		}
		.left {
			display: flex;
			align-items: center;
			color: $primary-color;
			.pipe {
				width: 60rpx;
				height: 2rpx;
				margin: 0 5rpx;
				background: #3a74fc;
			}
			image {
				width: 40rpx;
				height: 40rpx;
				object-fit: cover;
			}
		}
	}

	.task-footer {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			gap: 10rpx;
			.item {
				border: 1rpx solid $active-color;
				color: $active-color;
				font-size: 24rpx;
				border-radius: 10rpx;
				padding: 0 10rpx;
				&.active-2 {
					color: #ec6560;
					border-color: #ec6560;
				}
				&.active-3 {
					color: #d6837c;
					border-color: #d6837c;
				}
			}
		}
	}
}
.completeAction {
	position: relative;
	width: 120rpx;
	.btn {
		position: absolute;
		right: 0;
		bottom: 0;
		line-height: 1.6;
		font-size: 28rpx;
		padding: 6rpx 20rpx;
		border: 2rpx solid $border-color;
		border-radius: 10rpx;
		overflow: hidden;
	}
}
.icon {
	image {
		position: absolute;
		bottom: -17rpx;
		right: 0;
		width: 170rpx;
		height: 150rpx;
		object-fit: cover;
	}
}
.task-body {
	min-height: 40rpx;
}
</style>
